<template>
  <div class="mystep">
    <div class="mystep-body">
      <div class="mystep-item" v-for="(n,index) in list" :key="index" :class="{'active':active>index}">
        <div class="mystep-line" v-if="index != 0" :class="{'active':active>index}">
        </div>
        <div>
          <div class="mystep-number">{{index+1}}</div>
        </div>
        <div>
          <div class="mystep-text">{{n.text}}</div>
          <div class="mystep-text-en">{{n.text_en}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ProcessInLine",
    props: ['list','active'],
    created() {
      console.log(this.list)
    }
  }
</script>

<style lang="scss" scoped>
  .mystep {
    padding: 30px 0;

    div {
      display: inline-block;
    }

    .mystep-body {
      margin: 0 auto;

      .mystep-item {
        display: inline-block;
        .mystep-line {
          width: 100px;
          display: inline-block;
          float: left;
          height: 3px;
          background-color: #dedede;
          margin: 17px 10px 0 0;
        }
        .mystep-number {
          width: 38px;
          height: 38px;
          box-sizing: border-box;
          line-height: 32px;
          border: 3px solid #999999;
          text-align: center;
          font-size: 20px;
          border-radius: 19px;
          color: #999;
          float: left;
        }
        .mystep-text, .mystep-text-en {
          font-size: 16px;
          font-weight: 500;
          color: #999999;
          line-height: 22px;
          display: block;
          white-space: nowrap;
        }
        .mystep-text-en {
          width: 100px;
          font-size: 12px;
          font-weight: 500;
          color: #999999;
          line-height: 17px;
        }
      }
      .active{
        .mystep-line {
          background-color: #29af74;
        }
        .mystep-number {
          background-color: #29af74;
          border-color: #29af74;
          color: white;
        }
        .mystep-text {
          color: #29af74;
          font-weight: bold;
        }
        .mystep-text-en {
          color: #29af74;
          font-weight: bold;
        }
      }
    }
  }
</style>
